<template>
  <div class="trend-wrapper">
    <div class="search-bar clearfix">
      所有动态
      <span @click="openFilterDialog" style="float:right;margin-right: 16px;">筛选<img style="width: 14px;" src="../../../assets/livolobim/filter.png" alt=""> <div class="dot" v-if="hasFilter"></div></span>
    </div>
    <div class="content-wrapper" ref="scrollcontainer" v-infinite-scroll="loadTrends" infinite-scroll-disabled="disabled" infinite-scroll-immediate="false">
      <div class="content">
        <div class="date-wrapper" v-for="dateSection in dateCollect" :key="dateSection">
          <p class="date">{{dateSection}}</p>
          <div class="project-wrapper">
            <div v-for="(projectName, projectIndex) in trendDataCollect[dateSection].projectNames" :key="projectName" class="project">
              <div class="project-header">{{projectName}}</div>
              <div class="project-trend-wrapper">
                <div class="project-trend" @click="openDetail(trend)" v-for="trend in trendDataCollect[dateSection][trendDataCollect[dateSection].projectIds[projectIndex]]" :key="trend.id">
                  <div class="time">{{trend.dynamicCreateTime.substr(11, 5)}}</div>
                  <div class="avatar"><img :src="trend.executorAvatar" alt=""></div>
                  <div class="trend-detail">
                    <p class="row-1">{{trend.dynamicExecutiveName}} <span>{{trend.dynamicPerformOperation}}</span></p>
                    <span class="row-2">{{trend.dynamicTaskName}}</span>
                    <p class="row-3">{{trend.dynamicContent}}</p>
                    <div class="fileitem" v-for="file in trend.dynamicAttachment" :key="file.url">
                      <span style="cursor: pointer;" @click.stop="downloadFile(file.url, file.name)">
                        <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">
                        <span style="width: 90%;overflow:hidden;text-overflow: ellipsis;vertical-align:bottom;white-space:nowrap;display:inline-block;">{{file.name}}</span>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <img v-if="dateCollect.length === 0 && !isFirstLoading" style="width:200px;margin: auto;position:absolute;top:0;right:0;left:0;bottom: 0;" src="../../../assets/livolobim/empty.png" alt="">
    </div>
    <FilterPage title="动态筛选" page="trends" @filterData="filterData" ref="filterpage"/>
    <Tab currentTab="trends"/>
  </div>
</template>
<script>
import dingMixin from  '@/mixins/ding'
import {dateUtil} from '@/utils/dateUtil'
import Tab from './component/Tab'
import FilterPage from './component/FilterPage'
import formUtil from "@/utils/formUtil";

export default {
  data() {
    return {
      dateCollect: [],
      trendDataCollect: {},
      isFirstLoading: true,
      loading: false,
      page: 1,
      totalPage: 1,
      postForm: {
        plateIds: '',
        projectIds: '',
        dynamicExecutiveId: '',
        searchTime: ''
      },
      currentScrollTop: 0,
      hasFilter: false
    }
  },
  computed: {
    disabled () {
      return this.isFirstLoading || this.loading || this.noMore
    },
    noMore () {
      return this.page >= this.totalPage;
    }
  },
  components: {
    Tab,
    FilterPage
  },
  mixins: [dingMixin],
  beforeRouteLeave(to,from,next) {
    this.currentScrollTop = this.$refs.scrollcontainer.scrollTop;
    this.mobileStopRefresh()
    next()
  },
  activated() {
    this.mobileGetDevice(({model, brand, version}) => {
      if(brand === 'iPhone') {
        this.mobildPullToRefresh(() => {
          this.searchData(true)
        });
      }
    })
    this.$refs.scrollcontainer.scrollTop = this.currentScrollTop;
  },
  methods:{
    filterData(param) {
      this.postForm = formUtil.deepCopy(param);
      this.postForm.plateIds === '' && this.postForm.projectIds === '' && this.postForm.dynamicExecutiveId === '' && this.postForm.searchTime === dateUtil.thisDay() ? this.hasFilter = false : this.hasFilter = true
      this.searchData(true);
    },
    openFilterDialog() {
      this.$refs.filterpage.init();
    },
    openDetail(trend) {
      if(trend.dynamicAscription === '1') {
        this.$router.push({ name: 'mlivolobim-projectDetail', params: {projectId: trend.dynamicTaskId}});
      }else {
        this.$router.push({ name: 'mlivolobim-taskDetail', params: {id: trend.dynamicTaskId}})
      }
    },
    loadTrends() {
      this.loading = true;
      this.page ++;
      this.searchData();
    },
    async searchData(init) {
      if(init) {
        this.page = 1;
        this.dateCollect = [];
        this.trendDataCollect = {};
        this.isFirstLoading = true;
      }
      let {list, totalPage} = await this.$httpN.postB('division/dynamic/list', {
        dynamicAscription: '1',
        dynamicTaskId: '',
        plateIds: this.postForm.plateIds,
        projectIds: this.postForm.projectIds,
        dynamicExecutiveId: this.postForm.dynamicExecutiveId,
        searchTime: this.postForm.searchTime,
        page: this.page
      })

      this.setDataToCollect(list)

      this.loading = false;
      if(init) {
        this.totalPage = totalPage;
        this.$nextTick(() => {
          this.isFirstLoading = false;
        })
      }
    },
    setDataToCollect(list) {
      if(list.length > 0) {
        list.forEach(item => {
          if(item.dynamicAttachment) item.dynamicAttachment = JSON.parse(item.dynamicAttachment);
          if(this.dateCollect.includes(item.dayGroup)) {
            if(this.trendDataCollect[item.dayGroup].projectIds.includes(item.projectId)){
              this.trendDataCollect[item.dayGroup][item.projectId].push(item);
            }else {
              this.trendDataCollect[item.dayGroup].projectIds.push(item.projectId);
              this.trendDataCollect[item.dayGroup].projectNames.push(item.projectName);
              this.$set(this.trendDataCollect[item.dayGroup], item.projectId, [item])
            }
          }else {
            this.dateCollect.push(item.dayGroup);
            this.$set(this.trendDataCollect, item.dayGroup, {
              projectIds: [item.projectId],
              projectNames: [item.projectName],
              [item.projectId]: [item]
            })
          }
        })
      }
    },
    downloadFile: function (url, fileName) {//跨域文件路径、下载到本地的文件名
      if(/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(url)) {
         return this.dingPreviewPic(url);
      }else{
        this.mobileAlert('手机不支持下载文件，请到电脑端下载');
      }
    },
    getPic(filename) {
      if(filename) {
        if(/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438103037435905.png'
        }else if(/\.(txt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438530785140737.png'
        }else if(/\.(xls|xlsx)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438725690253314.png'
        }else if(/\.(doc|docx)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276439195636850689.png'
        }else if(/\.(psd)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276439984203751426.png'
        }else if(/\.(pdf)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276440139145535490.png'
        }else if(/\.(ppt|pptx|dps|dpt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276440657859305473.png'
        }else if(/\.(rar|zip|arj|gz)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442063039193090.png'
        }else if(/\.(html|htm)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442135319633921.png'
        }else if(/\.(dwg|bak|dwt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276441741667459074.png'
        }else if(/\.(wav|aif|au|mp3|ram|wma|mmf)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442006684524546.png'
        }else if(/\.(avi|mov|rmvb|rm|flv|mp4)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442233483124737.png'
        }else{
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276436590181343234.png'
        }
      }else {
        return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276436590181343234.png'
      }
    }
  },
  async mounted() {
    await this.searchData(true)
  }
}
</script>

<style lang="scss" scoped>
.trend-wrapper{
  background: #F8F8F8;
  .search-bar{
    height: 46px;
    background: white;
    line-height: 46px;
    padding-left:16px;
    border-bottom: 1px solid #e7e5e5;
    .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #4983FF;
      display: inline-block;
      vertical-align: super;
    }
  }
}
.content-wrapper{
  height: calc(100vh - 100px);
  overflow-y: auto;
  .content{
    z-index: 2;
    position: relative;
    .date{
      font-size: 16px;
      line-height: 40px;
      margin: 0;
      padding-left: 16px;
    }
    .project-wrapper{
      padding: 1px 16px 20px;
      background: white;
      border-radius: 3px;
      .project-header{
        margin-top: 20px;
        font-size: 15px;
        font-weight: bold;
        margin-bottom: 30px;
      }
      .project-trend-wrapper{
        .project-trend{
          margin-top: 20px;
          display: flex;
          border-bottom: 1px solid #F6F6F6;
          .avatar{
            width: 22px;
            margin-left: 12px;
            margin-right: 12px;
            position: relative;
            img{
              width: 22px;
              height: 22px;
              border-radius: 50%;
              position: relative;
              top: -5px;
            }
          }
          .time{
            position: relative;
            top: -2px;
          }
          .trend-detail{
            font-size: 13px;
            width:calc(100% - 90px);
            p{
              margin: 0;
            }
            .row-1{
              font-weight: bold;
              color: #606266;
              font-size:12px;
              span{
                margin-left: 10px;
                color:#606266;
                font-size:12px;
                font-weight: normal;
              }
            }
            .row-2{
              margin: 10px 0;
              font-size: 12px;
              display: inline-block;
              color: #909399;
              cursor: pointer;
            }
            .row-3{
              white-space: pre-line;
              font-size:12px;
              color: #606266;
              margin-bottom: 10px;
              width:100%;
              word-wrap: break-word;
            }
          }
        }
        
      }
    }
  }
}
.fileitem{
  line-height: 30px;
  border-radius: 3px;
  margin-bottom: 5px;
  background: #F5F5F5;
  padding-left:12px;
  font-size: 12px;
  .uploadtip{
    float:right;
    margin-right: 20px;
    cursor: pointer;
  }
}
</style>